<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML>
<html>
  <head>
   
    
    <title>宠物的基本信息</title>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script>
    	$(function(){
    		$("#petName").blur(function(){
    			var $petName=$(this).val();
    			var $span=$(this).next("span");
    			if($petName==""){
    				$span.html("昵称不能为空！");
    				return;
    			}
    			$.ajax({
    				"url":"getOnePetByNameServlet",
    				"type":"get",
    				"data":{"petName":$petName},
    				"dataType":"text",
    				"success":function(result){
    					if(result=="true"){
    						$span.html("该昵称可用！");
    					}else{
    						$span.html("该昵称已被使用！");
    					}
    				}, "error":function(){
    					alert("读取错误！");
    				}  				
    			});
    		});
    	});
    	
    	$(function(){
    		$("form").submit(function(){
    			/* if($("#petName").val()==""){
    				alert("昵称不能为空！");
    				return false;
    			} */
    			if($("#petBreed").val()=="-1"){
    				alert("请选择品种！");
    				return false;
    			}
    			if($("#birthday").val()==""){
    				alert("日期不能为空！");
    				return false;
    			}
    			var reg = /^\d{4}-\d{2}-\d{2}$/;    		
    			if(reg.test($("#birthday").val())==false){
    				alert("出生日期格式不正确!");
    				return false;
    			}
    			return true;
    		});
    	});
    	
    </script>  
   <style>
   		#one{width:500px;height:500px;border:1px black solid;margin:auto auto;background-color:#E2E8FF ;}
   		#two{width:350px;height:400px;border:0px black solid;margin:auto auto;margin-top:50px;}
   		h3{text-align: center;}
   		p{display: inline-block;margin-left:120px;}
   		p span{margin-left:10px;}
   </style> 
  </head>
  
  <body>
   	<div id="one">
   		<div id="two">
   			<h3>宠物的基本信息</h3>
   			<form action="addOnePetServlet" method="post">
   				<table>
   				 <tr>
   				 	<td>昵称：</td>
   				 	<td><input type="text" name="petName" id="petName"/>	
   				 	<span></span>  				 	
   				 	</td>
   				 </tr>
   				  <tr>
   				 	<td>品种：</td>
   				 	<td><select name="petBreed" id="petBreed">
	   					<option value="-1">请选择</option>
	   					<option value="1">狗</option>
		   				<option value="2">猫</option>
		   				<option value="3">鸟</option>
		   				<option value="4">兔</option>
	   				</select></td>
   				 </tr>
   				<tr>
   				 	<td>性别：</td>
   				 	<td><input type="radio" name="petSex" value="1" checked="checked"/>雄
   				 		<input type="radio" name="petSex" value="2"/>雌
   				 	</td>
   				 </tr>
   				  <tr>
   				 	<td>出生日期：</td>
   				 	<td><input type="text" name="birthday"  id="birthday"/>yyyy-MM-dd</td>
   				 </tr>
   				  <tr>
   				 	<td>宠物描述：</td>
   				 	<td><textarea name="descript" id="descript" rows="5" cols="20"></textarea> </td>  				
   				</table>
	   			<p><input type="submit" value="提交" /><span><input type="reset" value="重置"/></span></p>
	   			
   			</form>  		
   		</div>
   	
   	</div>
   	
  </body>
</html>
